<template>
  <ul>
    <li v-for="product in products">
      {{product.name}}: ￥{{product.price}} 
      <button 
        @click="handleClick(product)"
        :disabled="product.inventory === 0"
      >放入购物车</button>
    </li>
  </ul>
</template>

<script>
import axios from 'axios'
export default {

  data() {
    return {
      products: []
    }
  },

  mounted() {
    axios.get('/public/data.json')
      .then(result => {
        this.products = result.data
      })
  },

  methods: {
    handleClick(product) {
      product.inventory--
      this.$emit('onReceive', product)
    }
  },
}
</script>

<style lang='stylus' scoped>

</style>